<!DOCTYPE html>
<html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>公告管理</title>
    <link rel="stylesheet" type="text/css" href="/static/admin/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="/static/admin/css/admin.css"/>
    <script src="/static/admin/js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>

    <style>
        .layui-inline .layui-input {
            height: 30px;
            float: left;
            width: 150px;
            margin-left: 20px;
            color: gray;
        }
    </style>
</head>

<body>
<div class="page-content-wrap">
    <div class="layui-inline">
        <input class="layui-input" name="noticeTitle" id="noticeTitle" placeholder="请输入标题" type="text">
    </div>
    <button class="layui-btn layui-btn-sm" id="serach" data-type="reload" style="margin-left: 20px;">搜索</button>
    <button class="layui-btn layui-btn-sm layui-btn-primary" id="reset" data-type="reset" style="margin-left: 20px;">
        重置
    </button>
    <div class="layui-row">
        <table class="layui-hide" id="table" lay-filter="table">

        </table>
    </div>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">

    </div>
</script>

<script type="text/html" id="barDemo">
</script>
<script type="text/html" id="img">
    {{#  if(d.imgpath != null ){ }}
    <img style="width: 100px;height: 70px;" onclick="showImg('../..{{ d.imgpath }}')" src="../..{{ d.imgpath }}">
    {{# }else{ }}
    暂无
    {{# } }}
</script>
<script src="/static/admin/layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/admin/js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/admin/js/module/dialog.js" type="text/javascript" charset="utf-8"></script>
<script>
    //加载表单提交 要和上面的分开写
    layui.use(['table', 'laydate'], function () {
        var table = layui.table;
        var laydate = layui.laydate;

        var tableElement = table.render({
            elem: '#table'
            , url: '/notice/list.json'
            , toolbar: '#toolbarDemo'
            , title: '公告信息'
            , cols: [
                [
                    // {type: 'checkbox', fixed: 'left'},
                    //  {field: 'noticeId', title: 'ID', width: 80},
                     {field: 'noticeTitle', title: '标题', width: 300}
                    , {field: 'noticeContent', title: '内容'}
                    // , {field: 'publisher', title: '发布人', width: 80}
                    // , {field: 'modifier', title: '修改人', width: 80}
                    , {field: 'gmtCreateDesc', title: '发布时间', width: 180}
                ]
            ]
            , limit: 10
            , limits: [10, 20, 30, 40, 50, 100, 200, 500, 1000, 5000, 10000]
            , page: true
            , id: 'tableReload'
            , response: {
                statusCode: 0 //重新规定成功的状态码为 200，table 组件默认为 0
            }
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.totalCount, //解析数据长度
                    "data": res.data //解析数据列表
                };
            }
        });


        //搜索事件
        var $ = layui.$, active = {
            reload: function () {
                var noticeTitle = $("#noticeTitle").val();
                //执行重载
                table.reload('tableReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        noticeTitle: noticeTitle
                    }
                });
            }
        };

        $('#serach').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        $('#reset').on('click', function () {
            $("#noticeTitle").val("");
            tableElement.reload();
        });

        //头工具栏事件
        table.on('toolbar(table)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':
                    layer.open({
                        type: 2,
                        title: '新增通知信息',
                        area: ['700px', '400px'],
                        content: '/notice/noticeAdd.json'
                    });
                    break;
                case 'deleteBatch':
                    var ids = [];
                    var data = checkStatus.data;
                    if (data.length === 0) {
                        layer.msg("请选择", {icon: 5});
                        break;
                    }
                    for (var i = 0; i < data.length; i++) {
                        ids.push(data[i].noticeId);
                    }

                    console.log(ids);
                    dele(ids)
                    break;
            }
            ;
        });

        //监听行工具事件
        table.on('tool(table)', function (obj) {

            var data = obj.data;
            var noticeId = data.noticeId;

            if (obj.event === 'del') {
                dele([noticeId]);
            } else if (obj.event === 'edit') {
                layer.open({
                    type: 2,
                    title: '修改班级信息',
                    area: ['700px', '500px'],
                    content: '/notice/noticeEdit.json?noticeId=' + noticeId
                });
                // tableElement.reload();
            }
        });

        table.on('checkbox(table)', function (obj) {
            console.log(obj.checked); //当前是否选中状态
            console.log(obj.data); //选中行的相关数据
            console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
        });


        function dele(noticeIds) {
            layer.confirm('您确定要删除此项吗?', {
                btn: ['确定', '取消'] //按钮
            }, function () {
                // var datas = "{'" + isname + "':'" + idval + "'}";
                $.ajax({
                    url: "/notice/deleteNotice.json",
                    type: "POST",
                    data: JSON.stringify(noticeIds),
                    contentType: "application/json; text/html",
                    dataType: "json",
                    success: function (data) {
                        if (data.success) {
                            tableElement.reload();
                            layer.msg("删除成功",
                                {
                                    icon: 1,
                                    title: false,
                                    // btn: ['确定'],
                                    time: 1000,
                                    area: ['80px', '60px'],
                                    closeBtn: 0
                                });
                        } else {
                            layer.confirm(data.message,
                                {
                                    icon: 2,
                                    title: false,
                                    btn: ['确定'],
                                    area: ['100px', '120px'],
                                    closeBtn: 0
                                },
                                function (index) {
                                    layer.close(index);
                                });
                        }
                    },
                    error: function () {
                        layer.msg("系统异常", {
                            time: 1000
                        });
                    }
                });
            }, function () {
            });
        }


    });
</script>
</body>
</html>